<template>

	<div>
		<el-row :gutter="20">
				<div class="grid-content bg-purple">
					<el-select v-model="value" placeholder="请选择科室">
					    <el-option
					      v-for="item in returnReg.department"
					      :key="item.departvalue"
					      :label="item.departname"
					      :value="item.departvalue">
					    </el-option>
					  </el-select>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<div style="padding-top: 32px;">
				<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
					<el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title"
						:name="item.name">
						{{item.content}}
					</el-tab-pane>
					<el-row>
						<font style="font-size: 28px;">本周值班主任级医师：</font>
						<el-select v-model="value2" placeholder="请选择主任级医师">
						    <el-option
						      v-for="item in returnReg.department[0].option"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</el-row>
					<el-row >
						<div style="padding-top: 32px;">
							<font style="font-size: 28px;">本次值班普通医师：</font>
							<el-select v-model="value3" placeholder="请选择普通医师">
							    <el-option
							      v-for="item in returnReg.department[0].optiondoctor"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							  </el-select>
						</div>
					</el-row>
					<el-row >
						<div style="padding-top: 32px;">
							<font style="font-size: 28px;">优先下午安排专家：</font>
							<el-switch v-model="value4" active-color="#13ce66" inactive-color="#ff4949" >
							</el-switch>
						</div>
					</el-row>
					<el-row >
						<div style="padding-top: 32px;">
							<font style="font-size: 28px;">专家与普通医师均衡：</font>
							<el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</div>
					</el-row>
				</el-tabs>
			</div>
		</el-row>
		<el-row>
			<div style="padding-top: 12px;">
				<el-col :span="24">
					<div class="grid-content bg-purple">
						<el-button type="primary" plain>排班</el-button>
					</div>
				</el-col>
			</div>
		</el-row>
		
	</div>
</template>

<script>
	export default {
		mounted: function() {
					this.$axios.get('http://localhost:8080/arrange.json').then((result) => {
						this.returnReg = result.data; //写法固定
						console.log(arrange);
		
					}).catch((err) => {
						console.log(err);
					})
				},
		data() {
			return {
				returnReg:[],
				value: true,
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				editableTabsValue: '2',
				editableTabs: [{
					title: '一般规则',
					name: '1',
				}, {
					title: '高峰期',
					name: '2',
				}],
				tabIndex: 2,
				options: [{
				          value: '选项1',
				          label: '黄金糕'
				        }, {
				          value: '选项2',
				          label: '双皮奶'
				        }, {
				          value: '选项3',
				          label: '蚵仔煎'
				        }, {
				          value: '选项4',
				          label: '龙须面'
				        }, {
				          value: '选项5',
				          label: '北京烤鸭'
				        }],
				        value: ''
			}
		},
		methods: {
			handleTabsEdit(targetName, action) {
				if (action === 'add') {
					let newTabName = ++this.tabIndex + '';
					this.editableTabs.push({
						title: '新的规则',
						name: newTabName,
					});
					this.editableTabsValue = newTabName;
				}
				if (action === 'remove') {
					let tabs = this.editableTabs;
					let activeName = this.editableTabsValue;
					if (activeName === targetName) {
						tabs.forEach((tab, index) => {
							if (tab.name === targetName) {
								let nextTab = tabs[index + 1] || tabs[index - 1];
								if (nextTab) {
									activeName = nextTab.name;
								}
							}
						});
					}

					this.editableTabsValue = activeName;
					this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				}
			}
		}
	}
</script>
<style>
	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
